<template>
  <a-modal
    title="修改"
    :maskClosable="false"
    :width="1050"
    placement="right"
    :closable="true"
    @cancel="onClose"
    :visible="pSrcChannelEditVisiable"
  >
    <a-form :form="form">
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="机构标识" v-bind="formItemLayout">
            <a-input
              :disabled="true"
              v-decorator="[
                'instId',
                { rules: [{ required: true, message: '必填' }] },
              ]"
            />
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="渠道标识" v-bind="formItemLayout">
            <a-input
              :disabled="true"
              v-decorator="[
                'srcChannelId',
                { rules: [{ required: true, message: '必填' }] },
              ]"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="渠道名称" v-bind="formItemLayout">
            <a-input v-decorator="['srcChannelName']" /> </a-form-item
        ></a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="渠道状态" v-bind="formItemLayout">
            <a-select v-decorator="['transChannelStatus']">
              <a-select-option value="Y">启用</a-select-option>
              <a-select-option value="N">停用</a-select-option>
            </a-select>
          </a-form-item></a-col
        >
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24"
          ><a-form-item label="业务控制规则" v-bind="formItemLayout">
            <a-select v-decorator="['bizCtrlRule']">
              <a-select-option value="0">按自然日</a-select-option>
              <a-select-option value="1">按工作日</a-select-option>
            </a-select>
          </a-form-item></a-col
        >
        <a-col :md="12" :sm="24">
          <a-form-item label="营业开始时间" v-bind="formItemLayout">
            <a-input v-decorator="['bizStartTime']" /> </a-form-item
        ></a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="营业截止时间" v-bind="formItemLayout">
            <a-input v-decorator="['bizEndTime']" />
          </a-form-item>
        </a-col>

      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="支持账户类型" >
            <a-checkbox-group
              @change="onChange"
              v-decorator="['supportAcctType']"
            >
              <a-row>
                <a-col :span="12">
                  <a-checkbox value="A"> A </a-checkbox>
                </a-col>
                <a-col :span="12">
                  <a-checkbox value="B"> B </a-checkbox>
                </a-col>
                <a-col :span="12">
                  <a-checkbox value="C"> C </a-checkbox>
                </a-col>
              </a-row>
            </a-checkbox-group>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="支持交易配置" >
            <a-transfer
              :data-source="mockData"
              show-search
              :filter-option="filterOption"
              :target-keys="targetKeys"
              :render="(item) => item.title"
              @change="handleChange"
              @search="handleSearch"
            />
          </a-form-item>
        </a-col>
      </a-row>

      <a-row>
        <a-button @click="navigateTo">交易信息配置管理</a-button>
      </a-row>
    </a-form>
    <div class="drawer-bootom-button">
      <a-button @click="handleSubmit" type="primary" :loading="loading"
        >保存</a-button
      >
      <a-button @click="onClose" style="margin-left: 0.8rem">取消</a-button>
    </div>
  </a-modal>
</template>
<script>
import { mapState, mapMutations } from "vuex";

const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 10 },
};

export default {
  name: "PSrcChannelEdit",
  props: {
    pSrcChannelEditVisiable: {
      default: false,
    },
  },
  data() {
    return {
      formItemLayout,
      form: this.$form.createForm(this),
      roleData: [],
      userId: "",
      loading: false,
      supportAcctTypeList: [],
      surportTxnList: [],
      mockData: [],
      targetKeys: [],
    };
  },
  computed: {
    ...mapState({
      currentUser: (state) => state.account.user,
    }),
  },
  methods: {
    callback(key) {
      console.log(key);
    },
    //多选框
    selectAcct(checkedValues) {
      console.log("checked = ", checkedValues);
      console.log("value = ", this.value);
    },
    ...mapMutations({
      setUser: "account/setUser",
    }),
    onClose() {
      this.loading = false;
      this.form.resetFields();
      this.$emit("close");
    },
    setFormValues({ ...list }) {
      let fields = [
        "instId",
        "srcChannelId",
        "srcChannelName",
        "transChannelStatus",
        "bizCtrlRule",
        "bizStartTime",
        "bizEndTime",
        "supportAcctType",
        "surportTxnList",
      ];
      Object.keys(list).forEach((key) => {
        if (fields.indexOf(key) !== -1) {
          this.form.getFieldDecorator(key);
          let obj = {};
          obj[key] = list[key];
          this.form.setFieldsValue(obj);
        }
      });
    },

    handleSubmit() {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.loading = true;
          let user = this.form.getFieldsValue();
          user.roleId = user.roleId.join(",");
          user.userId = this.userId;
          user.deptId = this.userDept;
          this.$put("user", {
            ...user,
          })
            .then((r) => {
              this.loading = false;
              this.$emit("success");
              // 如果修改用户就是当前登录用户的话，更新其state
              if (user.username === this.currentUser.username) {
                this.$get(`user/${user.username}`).then((r) => {
                  this.setUser(r.data);
                });
              }
            })
            .catch(() => {
              this.loading = false;
            });
        }
      });
    },
    getMock() {
      const targetKeys = [];
      const mockData = [];
      for (let i = 0; i < 20; i++) {
        const data = {
          key: i.toString(),
          title: `content${i + 1}`,
          description: `description of content${i + 1}`,
          chosen: Math.random() * 2 > 1,
        };
        if (data.chosen) {
          targetKeys.push(data.key);
        }
        mockData.push(data);
      }
      this.mockData = mockData;
      this.targetKeys = targetKeys;
    },
    filterOption(inputValue, option) {
      return option.description.indexOf(inputValue) > -1;
    },
    handleChange(targetKeys, direction, moveKeys) {
      console.log(targetKeys, direction, moveKeys);
      this.targetKeys = targetKeys;
    },
    handleSearch(dir, value) {
      console.log("search:", dir, value);
    },
    navigateTo() {
      // admin#/admin/igas/pTxnCfg|产品管理:交易信息配置
    },
    onChange() {},
  },
  watch: {},
  mounted() {
    this.getMock();
  },
};
</script>
